<template>
  <div class="full c">
    <!-- Header -->
    <div class="w_full h_60 lh_50 relative">
      <Header :headerName="headerName" :headerStyle="headerStyle" />
    </div>

    <!-- body -->
    <div class="w_full h_full-60 flex_row_around pb_15">
      <!-- 1 -->
      <div class="w_32_p h_full flex_column_between">
        <div class="w_full h_34_p box_bgi p_10">
          <DataChart title="牲畜存栏免疫统计" path='' chartType="双柱图" :chartData="chartData1" filterText="" :filterList="[]"
            :isShowUnit="false" :isShowFilterIcon="false" :isShowFullIcon="false" />
        </div>
        <div class="w_full h_30_p box_bgi p_10">
          <DataChart title="牲畜育种统计" path='' chartType="环状图" :chartData="chartData2" filterText="" :filterList="[]"
            :isShowUnit="false" :isShowFilterIcon="false" :isShowFullIcon="false" />
        </div>
        <div class="w_full h_34_p box_bgi p_10">
          <DataChart title="农作物播种产量统计" path='' chartType="双柱图" :chartData="chartData3" filterText="" :filterList="[]"
            :isShowUnit="false" :isShowFilterIcon="false" :isShowFullIcon="false" />
        </div>
      </div>

      <!-- 2 -->
      <div class="w_32_p flex_column_between">
        <div class="w_full h_49_p box_bgi">
          <TownMap :townName="townName" />
        </div>
        <div class="w_full h_49_p box_bgi p_10">
          <!-- xxx 镇描述 -->
          <div class="w_full h_full text_indent_2 ph_10 scroll_box color_fff lh_35 text_justify">{{ content }}</div>
        </div>
      </div>

      <!-- 3 -->
      <div class="w_32_p h_full flex_column_between">
        <div class="w_full h_49_p box_bgi p_10">
          <div class="chart_title">嘎查村列表</div>
          <div class="w_full h_full-25 scroll_box">
            <div 
              class="w_full color_fff lh_40 fs_22 cursor" 
              v-for="(item, index) in villageList" :key="index"
              @click="clickVillageName(item)">{{ index + 1 +'. '+ item.villageName }}
            </div>
          </div>
        </div>
        <div class="w_full h_49_p box_bgi p_10">
          <DataChart title="常驻人口" path='' chartType="柱状图" :chartData="chartData4" filterText="" :filterList="[]"
            :isShowUnit="true" :isShowFilterIcon="false" :isShowFullIcon="false" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="js">
import Header from '../common/Header.vue'
import TownMap from '../common/townMap.vue'
import DataChart from '../components/data-chart/index.vue'
import { ref, reactive, computed, onMounted, watch, provide, nextTick } from 'vue'
import screenfull from 'screenfull'
import areaContent from '../assets/js/areaContent.js'

import { getVillageList } from '../api/index.js'

import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()

const headerName = ref('')
const headerStyle = reactive({
  color: '#00A295',
  fontWeight: 500,
  fontSize: '20px'
})

let townName = ref('')

let mapName = route.query.mapName
townName.value = mapName
headerName.value = '乌审旗 ' + mapName

let content = ref('')
const villageList = ref([])

let chartData1 = reactive({})
let chartData2 = reactive({})
let chartData3 = reactive({})
let chartData4 = reactive({})

let townId = ref(null)

onMounted(() => {
  initChart()

  showContent(mapName)
})

function initChart() {
  chartData1.x = ['牛', '羊', '马', '猪', '犬', '禽'].reverse()
  chartData1.data1 = {
    name: '存栏',
    data: [92334, 124353, 12324, 3344, 1343, 8134].reverse()
  }
  chartData1.data2 = {
    name: '免疫',
    data: [54364, 89245, 10124, 1443, 550, 6134].reverse()
  }

  chartData2.unit = ''
  chartData2.data = [
    { name: '牛', value: 8345 },
    { name: '山羊', value: 8149 },
    { name: '绵羊', value: 12314 },
    { name: '猪', value: 1335 },
    { name: '马', value: 1985 },
  ]

  chartData3.x = ['粮食', '油料', '蔬菜', '瓜果类', '糖料', '青饲料'].reverse()
  chartData3.data1 = {
    name: '播种面积（亩）',
    data: [4503, 7205, 1648, 885, 1300, 38102].reverse()
  }
  chartData3.data2 = {
    name: '产量（吨）',
    data: [829.5, 646.3, 4815.5, 1447.8, 3550, 30134].reverse()
  }

  chartData4.unit = '人'
  chartData4.x = ['2018', '2019', '2020', '2021', '2022', '2023'].reverse()
  chartData4.y = [3234, 3465, 2834, 3035, 3198, 3390, 3459].reverse()
}

function showContent(name) {
  if (name == '嘎鲁图镇') {
    townId.value = 150626100000
    content.value = areaContent.ga_lu_tu
  } else if (name == '乌审召镇') {
    townId.value = 150626101000
    content.value = areaContent.wu_shen_zhao
  } else if (name == '图克镇') {
    townId.value = 150626102000
    content.value = areaContent.tu_ke
  } else if (name == '乌兰陶勒盖镇') {
    townId.value = 150626103000
    content.value = areaContent.wu_lan_tao_le_gai
  } else if (name == '苏力德苏木乡') {
    townId.value = 150626200000
    content.value = areaContent.su_li_de
  } else if (name == '无定河镇') {
    townId.value = 150626104000
    content.value = areaContent.wu_ding_he
  }

  getVillageListData(townId.value)
}

// 获取 噶查村 列表
async function getVillageListData(townId) {
  let res = await getVillageList(townId)
  villageList.value = res.data
}

function clickVillageName(item) {
  router.push({
    path: '/villagePage',
    query: { townName: mapName, villageId: item.villageId, villageName: item.villageName }
  })
}

</script>

<style>
.c {
  background-color: #0F1427;
}
</style>